<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
		<meta name="renderer" content="webkit">
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>恒达汽修有限公司</title>
        <base href="${pageContext.request.contextPath }/">
		<link rel="stylesheet" type="text/css" href="css/meteinfo_ui.css" id="metuimodule" data-module="1" />
		<link rel="stylesheet" type="text/css" href="css/metinfo.css" />
		<script src="js/jQuery1.7.2.js" type="text/javascript"></script>
		<script src="js/metinfo_ui.js" type="text/javascript"></script>
		<script src="js/ch.js" type="text/javascript"></script>
		<!--[if IE]>
<script src="public/js/html5.js" type="text/javascript"></script>
<![endif]-->
	</head>
<body>
		<div class="m-nav">
			<nav class="inner">
				<ul class="list-none">
					<li id="nav_10001" style='width:123px;'><a href='apiinfoAction!selectBegin' title='网站首页' class='nav'><span>网站首页</span></a></li>
					<li id='nav_1' style='width:123px;'><a href='about.jsp' title='关于我们' class='hover-none nav'><span>关于我们</span></a></li>
					<li id='nav_2' style='width:123px;'><a href='newsaction!findall.action' title='信息中心' class='hover-none nav'><span>信息中心</span></a></li>
					<li id='nav_3' style='width:123px;'><a href='apiinfoAction!selectPage?ye=1' title='恒达汽修产品' class='hover-none nav'><span>恒达汽修产品</span></a></li>
					<li id='nav_4' style='width:122px;'><a href='carsaction!findall_cars' title='服务车型' class='hover-none nav'><span>服务车型</span></a></li>
					<li id='nav_34' style='width:122px;'><a href='demandInfoAtion!queryAll' title='在线招聘' class='hover-none nav'><span>在线招聘</span></a></li>
					<li id='nav_11' style='width:122px;' class='navdown'><a href='booking.jsp' title='在线预约' class='hover-none nav'><span>在线预约</span></a></li>
					<li id='nav_18' style='width:122px;'><a href='contact.jsp' title='联系我们' class='hover-none nav'><span>联系我们</span></a></li>
				</ul>
			</nav>
		</div>

		<header>
			<div class="inner top">

				<a href="../" title="汽配公司" id="web_logo">
					<img src="img/1363847903.png" style="width: 210px; height: 55px;" alt="汽配公司" title="汽配公司" style="margin:0px 0px 0px 10px;" />
				</a>

				<div class="top-seo">
					<div class="tpseotxt">
						<p>
							&nbsp;020-5856-1762</p>
					</div>
				</div>
			</div>
		</header>

		<div class="inner met_flash">
			<div class="flash">
				<img src='img/1363850250.jpg' width='980' alt='' height='300'></div>
		</div>

		<div class="sidebar inner">

			<div class="sb_nav">

				<h3 class='title line'>联系方式</h3>
				<div class="active editor b-r">
					<div> 电话：020-5856-1762</div>
					<div> 手机：15521389512</div>
					<div> QQ：913405314</div>
					<div> 联系人：谭先生</div>
					<div> 邮箱：hengdaqixiu@163.com</div>
					<div> 邮编：404100</div>
					<div class="clear"></div>
				</div>

			</div>

			<div class='sb_box b-r'>
				<h3 class="title">
			<div class="position">当前位置：<a href="apiinfoAction!selectBegin" title="网站首页">网站首页</a> &gt; <a href="booking.jsp" >在线预约</a></div>
			<span>在线预约</span>
		</h3>
				<div class="clear"></div>

				<div class="active" id="feedback">
					<script language='javascript'>
						function Checkfeedback() {
							if (document.myform.para16.value.length == 0) {
								alert('详细说明 不能为空');
								document.myform.para16.focus();
								return false;
							}
						}
					</script>
					<form id="frmAddBooking" method='POST' name='myform' action="creatImgCode!add.action"   target='_self'>
						<table class='feedback_table'>
							<tr>
								<td class='text'>姓名:</td>
								<td class='input'><input id="names" maxlength="10" name='sub.subName' type='text' size='30' class='input-text' /><span class='info' id="name">*</span></td>
							</tr>
							<tr>
								<td class='text'>性别:</td>
								<td class='input'>
									<input name='sub.subSex' type='radio' id='para18' value='男' checked='checked' />
									<label for='para18'>男</label> 
									<input name='sub.subSex' type='radio' id='para28' value='女' />
									<label for='para28'>女</label> 
									<span class='info' id="sex"></span><span></span></td>
							</tr>
							<tr>
								<td class='text'>车牌:</td>
								<td class='input'><input id="carNum" maxlength="10" name='sub.subLicense_plate' type='text' size='30' class='input-text' /><span class='info' id="licensePlateNumber">*</span></td>
							</tr>
							<tr>
								<td class='text'>车型:</td>
								<td>&nbsp;&nbsp;
									<select style="width: 160spx;" class="input" name="sub.subModel">
										<option>小型车</option>
										<option>微型车</option>
										<option>紧凑车型</option>
										<option>CDV车型</option>
										<option>MPV车型</option>
										<option>SUV车型</option>
										<option>三厢车型</option>
										<option>豪华车型</option>
										
									</select>
								</td>
								
							</tr>
							<tr>
								<td class='text'>手机:</td>
								<td class='input'><input id="phones" name="sub.subPhone" maxlength='11' type='text' size='30' class='input-text' /><span id="phone" class='info'></span><span></span></td>
							</tr>
							
							<tr>
								<td class='text'>预约时间:</td>
								<td class='input'>
									<input id="time" name="sub.subTime"  type="datetime-local"  /><span  class='info' id="appointmentTime"></span>
								</td>
							</tr>
							<tr>
								<td class='text'>服务类型:</td>
								<td>&nbsp;&nbsp;
									<select style="width: 160spx;" class="input" name="sub.sunService_type">
										<option>&nbsp;&nbsp;修车</option>
										<option>&nbsp;&nbsp;保养</option>
									</select>
								</td>
								
							</tr>
							<tr>
								<td class='text'>验证码</td>
								<td class='input'><input  name='code'    type='text' class='code'   size='6' maxlength='8' style='width:50px' />
								<img align='absbottom' src="creatImgCode"   id="img" 
										style='cursor: pointer;' title='看不清？点击更换验证码' />
							    <span id="code" class="info"></span></td>
							</tr>
							<tr>
								<td class='text'></td>
								<td class='submint'>
									<input id="btnSubmit" type='button' name='Submit' value='提交信息' class='submit button orange'>
								</td>
							</tr>
						</table>
					</form>

				</div>
			</div>
			<div class="clear"></div>
		</div>

		</div>
		<div class="clear"></div>
		</div>
		
	<footer class="inner" >
			<div class="foot-nav">
				<a href="about.jsp" 0 title='关于我们'>关于我们</a><span>
					|</span><a href='feedback.jsp' title='客户留言'>客户留言</a><span>|
					<span><a href='booking.jsp' title='在线预约'>在线预约</a><span>|
					</span><a href='demandInfoAtion!queryAll' title='人才招聘'>人才招聘</a><span>|
				<a href='contact.jsp' title='网站地图'>联系我们</a>
			</div>
			<div class="foot-text">
				<p>恒达汽修有限公司版权所有     2017-2018    备案号：渝ICP备13004606
				</p>
				<p>电话：020-5856-1762</p>
			</div>
		</footer>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript">
				var hcode;
			$(function(){
				$("#btnSubmit").click(function(){
					var name=$("#names").val();
					
					var phone=$("#phones").val();
					var appointmentTime=$("#time").val();
					var code=$("input[name=code]").val().trim().toLowerCase();
					var licensePlateNumber=$("#carNum").val();
					//alert(licensePlateNumber)
					var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
					if(name=="" ||name==null){
						$("#name").text("请输入姓名");
						return false; 
					}
					$("#name").text("");
					
					var is= isVehicleNumber(licensePlateNumber);
					if(!is){
						$("#licensePlateNumber").text("请输入正确的车牌号码");
						return false;
					}
					$("#licensePlateNumber").text("");
					if(!myreg.test(phone)) 
					{ 
					   $("#phone").text("请输入有效的手机号码！");
					    return false; 
					}  $("#phone").text("");
					
					if(appointmentTime.length<3){
						//alert("错")
						$("#appointmentTime").text("请选择预约时间");
						return false; 
					}
					$("#appointmentTime").text("");
					
					if(code==""){
						$("#code").text("请输入验证码");
						return false; 
					}$("#code").text("");
					if(code!=hcode){
						alert(code==hcode)
						alert(hcode)
						alert(code)
						$("#code").text("验证码不正确");
						return false;
					}$("#code").text("");
					
				
					//可以提交
					//$("#frmAddBooking").submit();
					 var frm = $("#frmAddBooking").serialize();
						$.post("creatImgCode!add.action",frm,function(data){
							
							if(data){
								 alert("预约成功")
							}
						});
					//return true;
					
				})
				
				//验证码
				   $("#img").click(function(){

	                   $("#img").attr("src","creatImgCode.action?d="+Math.random());
	                   
	                   setTimeout(function() {
	                	   $.post("creatImgCode!yz",{},function(data){
		                     	
								hcode=data.trim().toLowerCase();
							
							}); 
						}, 1000);
	                   
				   })
				
				  
			  //  function fun() {
			   //读取验证码
			      $.post("creatImgCode!yz",{},function(data){
                  	
						hcode=data.trim().toLowerCase();
					
				}); 
			 //} 
				 
			});

            
			//正则表达式验证车牌号码是否正确
			  function isVehicleNumber(vehicleNumber) {
			      var result = false;
			      if (vehicleNumber.length == 7){
			        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
			        result = express.test(vehicleNumber);
			      }
			      return result;
			  }

		</script>
		
		
		
	</body>
</html>